<template>
	<view>
		<navBar title="我的关注"></navBar>
		<view v-if="myAttentions.length === 0" class="unData">
			<u-empty mode="data" text='暂无关注过的博主' icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		</view>
		<view v-else class="mayAttention">
			<view class="attentionMain" v-for="attention in myAttentions" :key="attention.id" >
				<cover-image class="img" :src="attention.user.avatar"></cover-image>
				<view class="attentionText">
					<text class="name">{{attention.user.name}}</text>
					<text class="desc">{{attention.user.desc}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myAttention
	} from '@/config/api.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				myAttentions: [],
			}
		},
		onLoad() {
			this.initmyAttention()
		},
		methods: {
			async initmyAttention() {
				const myAttentions = await myAttention(this.userInfo.token)
				this.myAttentions = myAttentions.data.rows
				console.log(myAttentions.data.rows);

			},

		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.mayAttention {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background-color: #ececec;
		padding: 2vh 2vw 0 2vw;


		.attentionMain {

			width: 100%;
			height: 15vh;
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
			background-color: #ffffff;
			padding: 2vw;
			box-sizing: border-box;
			// border: 1px solid black;
			display: flex;
			align-items: center;

			.img {
				border: 1px solid #ececec;
				width: 19vw;
				height: 10vh;
				border-radius: 50%;
			}

			.attentionText {
				height: 8vh;
				margin-left: 6vw;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: 5vw;
					font-weight: 700;
				}

			}

		}
	}
	.unData {
		padding-top: 8vh;
		width: 100vw;
		height: 100wh;
	
		::v-deep .u-empty__text {
			font-size: 18px !important;
		}
	
		::v-deep uni-image {
			width: 80% !important;
		}
	}
</style>
